/**
 * @description  : 自定义分页组件
 * @descriptionDetail : 自定义分页组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-04 19:14:22
 */
<template>
  <mescroll-body
    :top="top"
    :down="downOption"
    :up="upOption" 
    :bottom="bottom" 
    :height="height"
    :fixed="fixed" 
    :ref="'mescrollRef'+i"
    @init="mescrollInit"
    @down="downCallback"
    @up="upCallback"
    @emptyclick="emptyClick"
  >
    <view v-for="(it, idx) in listDatas" :key="idx">
      <slot :data="it" :index="idx"></slot>
    </view>
  </mescroll-body>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	
export default { // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
  name:"ListView",
  mixins: [MescrollMixin,MescrollMoreItemMixin,],
  props:{
    initLoad: { // 是否自动加载列表数据
      type: Boolean,
      default: true,
    },
    top: {  // 列表距离顶部高度
      type: [String,Number],
      default: 0,
    },
    fixed:{
      type:Boolean,
      default: true,
    },
    bottom: {  // 列表距离顶部高度
      type: Number,
      default: 0,
    },
    height:{
      type: String,
      default: "100%",
    },
    loadData: { // 加载列表数据
      type: Function,
      default: null,
    },
    emptyClick: { // 空白页按钮点击事件
      type: Function,
      default: function() {},
    },
    useDown: { // 是否弃用下拉刷新
      type: Boolean,
      default: true,
    },
    justScroll: { // 只需要滚动
      type: Boolean,
      default: false,
    },
    useUp: {
      type:Boolean,
      default: true,
    },
	noMoreDataTipShow: {
	  type:Boolean,
	  default:true,
	}
  },
  data() {
    return {
      downOption:{
        auto: this.initLoad,
        use : this.justScroll ? false : this.useDown,
      },
      upOption:{
        use: this.justScroll ? false : this.useUp,
        auto: this.initLoad, // 默认自动加载
        textLoading: '加载中 ...', // 加载中的提示文本
        textNoMore: this.noMoreDataTipShow ? '没有更多数据了' : '', // 没有更多数据的提示文本
        offset: 150, // 距底部多远时,触发upCallback,仅mescroll-uni生效 ( mescroll-body配置的是pages.json的 onReachBottomDistance )
        noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
      },
      listDatas: [], // 列表数据
    }
  },
  mounted() {
    if(this.justScroll){
      this.getData();
    }
  },
  created() {
  },
  methods: {
    /* 下拉刷新的回调 */
    downCallback(e) {
      if(!this.useUp){
        let page = {
          num: 1,
          size: 999,
        };
        this.loadData(page,e.downLoadType).then(dr => {
          this.listDatas = page.num == 1 ? [...dr.data.list,] : [...this.listDatas, ...dr.data.list,]
          // this.mescroll.endSuccess(dr.data.length);
          if(dr.data.totalCount){
            this.mescroll.endBySize(page.size, dr.data.totalCount); 
          }else{
            this.mescroll.endSuccess(dr.data.list.length);
          }
        }, err => {
          console.error(err);
          this.mescroll.endErr();
        }).catch((err) => {
          console.error(err);
          this.mescroll.endErr();
        })
      }else{
        this.mescroll.resetUpScroll();
      }

    },
    /* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      this.loadData(page).then(dr => {
        this.listDatas = page.num == 1 ? [...dr.data.list,] : [...this.listDatas, ...dr.data.list,]
        if(dr.data.totalCount){
          this.mescroll.endBySize(page.size, dr.data.totalCount); 
        }else{
          this.mescroll.endSuccess(dr.data.list.length);
        }
      }, err => {
        console.error(err);
        this.mescroll.endErr();
      }).catch((err) => {
        console.error(err);
        this.mescroll.endErr();
      })
    },
    getData(){
      uni.showLoading({
        title:'加载中...',
      });
      let page = {
        num: 1,
        size: 999,
      };
      this.loadData(page).then(dr => {
        uni.hideLoading();
        this.listDatas = [...dr.data.list,];
      }, err => {
        uni.hideKeyboard();
        console.error(err);
      }).catch((err) => {
        uni.hideLoading();
        console.error(err);
      })
    },
    /** 
     * 滚动到指定位置
     * y: 可以传入位置(eg. 500), 或者css选择器(eg. li)
     * time: 过渡时间 
     */
    scrollTo(y, time) {
      this.mescroll.scrollTo(y, time);
    },
    /** 返回当前的滚动table对象，方便调用mescroll原生方法 */
    getMescroll() {
      return this.mescroll;
    },
    /** 刷新列表数据 */
    refresh() {
      console.log("触发刷新");
      this.mescroll.resetUpScroll();
    },
  },
}
</script>
